<template>
    <div>
        <div v-if="currentPanel == 'default'">
            <el-card>
                <el-tabs type="card" @tab-click="clickTabHandle">
                    <el-tab-pane label="朋友圈列表">
                        <div class="m-alert">
                            <span class="el-icon-info"></span>
                            <div>
                                <div>完成的使用【历史朋友圈】功能，需要完成一下设置，请确认使用前完成配置：</div>
                                <div>1、完成自建应用【企微版】配置</div>
                                <div>2、管理员完成【朋友圈对外显示】设置</div>
                                <div>3、员工在企微移动端-个人详情完成【朋友圈链接】填写</div>
                                <div>前往<el-button type="text">查看配置引导</el-button></div>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="企微朋友圈">
                        <div class="m-alert" style="margin-bottom: 10px">
                            <span class="el-icon-info"></span>
                            <span>支持将“企业微信朋友圈”的内容，同步至“历史朋友圈”，但由于企业微信限制，赞不支持地址、评论、点赞的同步</span>
                        </div>
                        <div class="m-alert">
                            <span class="el-icon-info"></span>
                            <div>您还未开启企微朋友圈自动同步功能，请前往“<el-button type="text" style="padding: 0;height: 0;">朋友圈设置</el-button>”完成开启，开启后系统将每天自动同步企业微信朋友圈至历史朋友圈</div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane label="员工朋友圈">
                        <div class="m-alert">
                            <span class="el-icon-info"></span>
                            <span>仅支持具有外部联系人权限的成员使用历史朋友圈，需要员工自行填写朋友圈链接，至企业微信的对外展示信息中。</span>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-card>

            <div class="interspaceH"></div>

            <div v-if="current == 0">
                <Wechat @currentHandle="currentHandle"/>
            </div>

            <div v-else-if="current == 1">
                <EnterpriseWeChat/>
            </div>

            <div v-else-if="current == 2">
                <Member @currentHandle="currentHandle"/>
            </div>
        </div>

        <div v-if="currentPanel == 'sendMoments'">
            <SendMoments @currentHandle="currentHandle" />
        </div>

        <div v-if="currentPanel == 'setMoments'">
            <SetMoments @currentHandle="currentHandle" />
        </div>
    </div>
</template>

<script>

import Wechat from "@/views/customer/client_moments/wechat"
import EnterpriseWeChat from "@/views/customer/client_moments/enterprise_weChat"
import Member from "@/views/customer/client_moments/member"
import SetMoments from "@/views/customer/client_moments/set_moments";
import SendMoments from "@/views/customer/client_moments/send_moments";

export default {
    components: {
        Wechat,
        EnterpriseWeChat,
        Member,
        SetMoments,
        SendMoments
    },
    data() {
        return {
            currentPanel: 'default',
            current: 0
        }
    },
    mounted() {
    },
    methods: {
        clickTabHandle(e) {
            this.current = e.index
        },
        currentHandle(e) {
            this.currentPanel = e
        }
    }
}
</script>

<style scoped>
.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}
</style>
